import React, { Component } from 'react'
import axios from 'axios'
class Detail extends Component {
  state = {
      arr:[]
  }
  componentDidMount() {
    console.log(this.props.match.params.id)
    axios.get("/list").then(res=>{
       let filterarr = res.data.filter((item)=>{
           return  item.id == this.props.match.params.id
       })
       this.setState({
           arr:filterarr
       })
    })
  }
  render() {
    return (
      <div>
          {
              this.state.arr &&  this.state.arr.length ?  this.state.arr.map((item,index)=>{
                  return <div key={index}>
                       <h4>{item.name}</h4>
                       <img src={item.img} alt="" />
                  </div>
              }):""
          }
      </div>
    )
  }
}

export default Detail